import React from 'react'
import { Row, Col, Button, Space, Typography, Statistic } from 'antd'
import { 
  PlayCircleOutlined, 
  PauseCircleOutlined, 
  ReloadOutlined,
  DownloadOutlined,
  UploadOutlined,
  ControlOutlined
} from '@ant-design/icons'
import { Utils } from '../../utils'

const { Text } = Typography

const ExperimentControl = ({ experimentState, onControl, connected }) => {
  const { running, time, periodCount } = experimentState

  const controlButtons = [
    {
      key: 'start',
      label: running ? '暂停实验' : '开始实验',
      icon: running ? <PauseCircleOutlined /> : <PlayCircleOutlined />,
      type: 'primary',
      size: 'large',
      danger: running
    },
    {
      key: 'reset',
      label: '重置实验',
      icon: <ReloadOutlined />,
      type: 'default',
      size: 'large'
    },
    {
      key: 'd0',
      label: 'D0',
      icon: <ControlOutlined />,
      type: 'default',
      size: 'middle'
    },
    {
      key: 'd1',
      label: 'D1',
      icon: <ControlOutlined />,
      type: 'default',
      size: 'middle'
    },
    {
      key: 'getPendulumLength',
      label: '获取摆长数据',
      icon: <DownloadOutlined />,
      type: 'default',
      size: 'middle'
    },
    {
      key: 'getPendulumAngle',
      label: '获取角度数据',
      icon: <DownloadOutlined />,
      type: 'default',
      size: 'middle'
    }
  ]

  const handleButtonClick = (action) => {
    if (!connected) {
      Utils.showToast('WebSocket未连接', 'warning')
      return
    }
    onControl(action)
  }

  return (
    <div className="experiment-control">
      <Row gutter={[16, 16]}>
        {/* 主要控制按钮 */}
        <Col span={24}>
          <Space size="middle" wrap>
            {controlButtons.slice(0, 2).map((button) => (
              <Button
                key={button.key}
                type={button.type}
                size={button.size}
                icon={button.icon}
                danger={button.danger}
                disabled={!connected}
                onClick={() => handleButtonClick(button.key)}
                className={`control-btn control-btn-${button.key}`}
              >
                {button.label}
              </Button>
            ))}
          </Space>
        </Col>
        
        {/* 辅助控制按钮 */}
        <Col span={24}>
          <Space size="small" wrap>
            {controlButtons.slice(2).map((button) => (
              <Button
                key={button.key}
                type={button.type}
                size={button.size}
                icon={button.icon}
                disabled={!connected}
                onClick={() => handleButtonClick(button.key)}
                className={`control-btn control-btn-${button.key}`}
              >
                {button.label}
              </Button>
            ))}
          </Space>
        </Col>
        
        {/* 状态显示 */}
        <Col span={24}>
          <div className="status-display">
            <Row gutter={16}>
              <Col span={12}>
                <Statistic
                  title={
                    <Text style={{ color: '#b0bec5', fontSize: '12px' }}>
                      累计时间
                    </Text>
                  }
                  value={Utils.formatTime(time)}
                  suffix="秒"
                  valueStyle={{ 
                    color: running ? '#4fc3f7' : '#ffffff',
                    fontSize: '16px',
                    fontFamily: 'monospace'
                  }}
                />
              </Col>
              <Col span={12}>
                <Statistic
                  title={
                    <Text style={{ color: '#b0bec5', fontSize: '12px' }}>
                      周期数
                    </Text>
                  }
                  value={periodCount}
                  valueStyle={{ 
                    color: periodCount > 0 ? '#66bb6a' : '#ffffff',
                    fontSize: '16px',
                    fontFamily: 'monospace'
                  }}
                />
              </Col>
            </Row>
          </div>
        </Col>
        
        {/* 连接状态指示 */}
        <Col span={24}>
          <div className={`connection-status ${connected ? 'connected' : 'disconnected'}`}>
            <Space>
              <div className={`status-dot ${connected ? 'connected' : 'disconnected'}`} />
              <Text style={{ fontSize: '12px' }}>
                {connected ? '✅ 已连接' : '❌ 未连接'}
              </Text>
            </Space>
          </div>
        </Col>
      </Row>
    </div>
  )
}

export default ExperimentControl
